import { Component } from 'react'

export default class Hello extends Component {
  // 为组件提供状态
  state = {
    count: 0,
    list: [],
    isLoading: true,
  }

  /* handleClick() {
    console.log(this) // undefined 事件处理程序的函数式函数调用模式，在严格模式下，this指向`undefined`
    console.log('点击事件触发')
  } */

  handleClick = () => {
    console.log(this)
    console.log('点击事件触发')
  }

  /* 
  fn = () => {}  这种形式的语法是简化语法（语法糖），书写会更简单。实际上，完整的写法是：
  ↓↓↓↓↓↓↓↓↓↓↓↓↓
  constructor() {
    this.fn = () => {}
  } 
  */

  handleClick1(e) {
    e.preventDefault()
    console.log('事件对象', e)
  }

  render() {
    return (
      <>
        <div>计数器：{this.state.count}</div>
        {/* <button onClick={this.handleClick}>点我</button> */}
        {/* <button onClick={() => this.handleClick()}>点我</button> */}
        {/* <button onClick={this.handleClick.bind(this)}>点我</button> */}
        <button onClick={this.handleClick}>点我</button>
        <a href="//www.jetwang.cn" onClick={this.handleClick1}>
          点我，不会跳转页面
        </a>
      </>
    )
  }
}
